<template>
  <div class="recommendMv">
    <div class="title">
      <h3>推荐MV</h3>
      <a @click="toRecommendMvList">更多></a>
    </div>
    <div class="recommendMvList">
      <div class="li" v-for="(item, index) in recommendMvlist" :key="index" @click="toVideoPage(item.id)">
        <div class="img">
          <img :src="item.picUrl" />
          <div class="playCount"><i class="iconfont icon-video"></i> {{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }} </div>
          <div class="top">{{ item.copywriter }}</div>
        </div>
        <div class="name">{{ item.name }}</div>
        <div class="artistName">
          <a v-for="(item1, index) in item.artists" :key="index">
          {{ index + 1 === item.artists.length ? item1.name : item1.name + ' / ' }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecommendMv } from '../../../network/playlist.js'
export default {
  data () {
    return {
      recommendMvlist: []
    }
  },
  methods: {
    // 推荐MV更多入口
    toRecommendMvList () {
      this.$router.push('/video_mv_list')
    },
    // MV播放页面
    toVideoPage (id) {
      this.$router.push('/video_player/' + id)
    },
    getRecommendMv () {
      getRecommendMv().then(res => {
        // console.log(res.data)
        this.recommendMvlist = res.data.result
        // console.log(this.recommendMvlist)
      })
    }
  },
  created () {
    this.getRecommendMv()
  }
}
</script>

<style lang="less" scoped>
  .recommendMv {
    width: 90%;
    margin: 50px auto;
    box-sizing: border-box;
    .title {
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e1e1e2;
      a {
        cursor: pointer;
      }
    }
    .recommendMvList {
      width: 100%;
      height: 250px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .li {
        width: 300px;
        margin: 15px 0;
        box-sizing: border-box;
        cursor: pointer;
        // display: flex;
        // flex-direction: column;
        .img {
          width: 100%;
          position: relative;
          overflow: hidden;
          img {
            width: 100%;
          }
          .playCount {
            position: absolute;
            top: 0;
            right: 0;
            width: 30%;
            height: 25px;
            color: #fff;
            text-align: right;
            padding-right: 5px;
            background-image: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.4));
            transform: translateY(0);
            transition: transform 0.5s;
            i {
              font-size: 16px;
            }
          }
          .top {
            position: absolute;
            top: 0;
            width: 100%;
            height: 20%;
            color: #fff;
            font-size: 14px;
            background: rgba(0, 0, 0, 0.6);
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
            padding: 5px;
            overflow: hidden;
            transform: translateY(-100%);
            transition: transform 0.5s;
          }
        }
        .img:hover .top {
          transform: translateY(0);
        }
        .img:hover .playCount {
          transform: translateY(-100%);
        }
        .name {
          display: flex;
          justify-content: flex-start;
          margin: 1px 0;
          font-size: 14px;
        }
        .artistName {
          margin: 1px 0;
          font-size: 14px;
          color: #666694;
          display: flex;
          justify-content: flex-start;
          flex-wrap: nowrap;
          a {
            float: left;
            display: block;
          }
        }
      }
    }
  }
</style>
